{% extends 'base.html' %}

{% block title %}Seiya 数据分析系统 － G2 图表示例{% endblock %}

{% block content %}
  <nav aria-label='breadcrumb'>  <!-- 面包屑 -->
    <ol class='breadcrumb'>
      <li class='breadcrumb-item'><a href='/'>首页</a></li>
      <li class='breadcrumb-item active' aria-current='page'>G2 图表示例</li>
    </ol>
  </nav>
  <div id='c1'></div>  <!-- 创建图表容器，必须指定 id 属性值为 'c1' -->
{% endblock %}

{% block js %}
  <script>
    var data = [  // 创建一个 JSON 数组
      {year: '1951 年', sales: 38},
      {year: '1952 年', sales: 58},
      {year: '1953 年', sales: 61},
      {year: '1955 年', sales: 145},
      {year: '1956 年', sales: 48},
      {year: '1957 年', sales: 58},
      {year: '1958 年', sales: 38},
      {year: '1988 年', sales: 38},
    ];

    var chart = new G2.Chart({  // 创建 Chart 对象
      container: 'c1',  // 指定容器 ID
      forceFit: true,   // 指定图表宽度，这里自适应屏幕宽度
      height: 500       // 指定图表高度
    });
    
    chart.source(data); // 载入数据源
    chart.scale({   // 度量对数据进行归一化，方便设置图形属性
      sales: {tickInterval: 20, alias: '数值哈哈'},
    });     // tickInterval 指定坐标轴刻度点的间距，alias 设置属性别名
    // interval 生成一个几何包装对象
    // 用面积来表示大小关系的图形，通常是柱状图或饼图
    chart.interval()
      .position('year*sales')   // 将数据映射到图形的位置上
      .color('#36B3C3');  // 将数据映射到图形的颜色上
    chart.render()        // 加载图表
  </script>
  <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.8/dist/g2.min.js"></script>
{% endblock %}
